﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fbapp1.aspx.cs" Inherits="YANFBApp.fbapp1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <title>Trắc nghiệm: đo độ "sống ảo" của bạn</title>
    <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        /*font from google fonts*/
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 300;
          src: local('Open Sans Light'), 
              local('OpenSans-Light'), 
              url(https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTXwUvq1pQaUIDqPgpae5ItU.woff) format('woff');
        }
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 400;
          src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/59ZRklaO5bWGqF5A9baEET8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
        }
        @font-face {
          font-family: 'Open Sans';
          font-style: normal;
          font-weight: 600;
          src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSnwUvq1pQaUIDqPgpae5ItU.woff) format('woff');
        }
        @font-face {
          font-family: 'Open Sans';
          font-style: italic;
          font-weight: 400;
          src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBkbnXQ06sCSpaytluCdpFnY.woff) format('woff');
        }
        /*END - font from google fonts*/
        body {
            /*padding:20px 0 0 20px;*/
            margin:0 auto;
            font-family: 'Open Sans';
            font-size:14px;
        }
        p {
            text-align:justify;
        }
        #appwrapper {
            width:800px;
            height:600px;
            padding:0;
            margin:0;
            float:left;
            background: transparent url('https://fbapp.yan.vn/images/conntentapp1.jpg') no-repeat left top;
            overflow:hidden;
        }
        #appPanel, #resultPanel, #welcomePnl {
            width:360px;
            height:560px;
            padding:20px;
            margin:0 0 0 400px;
            float:left;
            overflow:hidden;
        }
        #resultPanel p {
            /*font-size:12px;*/
        }
        #btnPrev {
            padding:5px 10px;
            background-color:#e58c9e;
            color:#ffffff;
            float:left;
            /*border:1px solid #5a4818;*/
            border:0px none;
            cursor:pointer;
        }
        #btnNext {
            margin-left:10px;
            padding:5px 10px;
            background-color:#e58c9e;
            color:#ffffff;
            float:left;
            /*border:1px solid #5a4818;*/
            border:0px none;
            cursor:pointer;
        }
        #btnFinish, #btnContinue {
            margin-left:10px;
            padding:5px 10px;
            background-color:#e58c9e;
            color:#ffffff;
            float:right;
            /*border:1px solid #5a4818;*/
            border:0px none;
            cursor:pointer;
        }
        #lblNumber {
            background-color:#e58c9e;
            color:#ffffff;
            border-radius:50%;
            padding:0px 5px;
        }
        #lblResultTitle {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div id="fb-root"></div>
    <script>
        window.fbAsyncInit = function () {
            FB.init({
                appId: '151010854934254',
                xfbml: true,
                version: 'v2.2'
            });

            function onLogin(response) {
                if (response.status == 'connected') {
                    FB.api('/me', { fields: 'last_name, first_name, email' }, function (data) {
                        console.log(JSON.stringify(data));
                        $("#lblFirstname").html(data.first_name);
                        $("#welcomePnl").hide();
                        _gaq.push(['_trackEvent', 'FB App', 'G-Show : song ao', 'Ready']);
                        showQuestion(currentQuestion);
                    });
                }
            }

            FB.getLoginStatus(function (response) {
                // Check login status on load, and if the user is
                // already logged in, go directly to the welcome message.
                if (response.status == 'connected') {
                    onLogin(response);
                } else {
                    // Otherwise, show Login dialog first.
                    FB.login(function (response) {
                        onLogin(response);
                    }, { scope: 'user_friends, email' });
                }
            });
        };

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <div id="appwrapper">
        <div id="welcomePnl">
            <table style="" border="0">
                <tr>
                    <td>
                        <p>Xin chào ! <b id="B1"></b></p>
                        <br />
                        <p><i>Vui lòng chờ tí nha....</i></p>
                    </td>
                </tr>
            </table>
        </div>
        <div id="appPanel">
            <table style="" border="0">
                <tr>
                    <td>
                        <p>Xin chào ! <b id="lblFirstname"></b></p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>
                            <b>Câu số <span id="lblNumber">1</span></b>
                            <br /><br />
                        </p>
                        <p id="lblQuestion" style="font-size:18px;">&nbsp;</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <u><b>Câu trả lời:</b></u>
                        <br /><br />
                        <input type="radio" name="answer" id="answer1" value="1" /><label for="answer1">&nbsp;</label>
                        <br /><br />
                        <input type="radio" name="answer" id="answer2" value="2" /><label for="answer2">&nbsp;</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <br /><br />
                        <input type="button" value="Câu trước" id="btnPrev" style="display:none;" onclick="showQuestion((currentQuestion + 9) % 10);" />
                        <input type="button" value="Câu sau" id="btnNext" onclick="if (checkAnswerToNext() == true) showQuestion(currentQuestion + 1);" />
                        <input type="button" value="Xem KQ" id="btnFinish" onclick="finish();" />
                    </td>
                </tr>
                <tr>
                    <td><b id="lblWarning"><i>Vui lòng trả lời xong rồi mới chuyển câu.</i></b></td>
                </tr>
            </table>
        </div>
        <div id="resultPanel">
            <p>Số điểm của bạn:&nbsp;&nbsp;&nbsp;<span id="lblTotalScore">0</span></p>
            <br />
            <p id="lblResultTitle">&nbsp;</p>
            <br />
            <p id="lblResultDetail">&nbsp;</p>
            <br />
            <p>
                Bạn có muốn biết giới trẻ đã trải qua thời kỳ khắc nghiệt khi internet “rùa bò” và mạng xã hội vẫn còn mới mẻ ở Việt Nam như thế nào không?
                <br /><br />
                Hãy xem clip <b><a href="https://www.youtube.com/watch?v=6qq9uJzU3Jk" target="_blank">G-show: Sống ảo</a></b> trên Yannewstube và cùng cười nhé.
            </p>
            <br />
            <input type="button" value="Chia sẻ" id="btnContinue" onclick="shareResult();" />
        </div>
    </div>
    <script type="text/javascript">
        var questions = [{
            id: 1,
            question: "Cứ có tin nhắn báo từ facebook, instagram hay từ các mạng xã hội khác là bạn đều xem và trả lời ngay?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 2,
            question: "Làm gì, đi đâu, ăn gì… bạn cũng đều chụp hình ghi nhận và up lên mạng xã hội?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 3,
            question: "Bạn luôn chỉnh sửa hình ảnh trước khi up lên các mạng xã hội?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 4,
            question: "Bạn thích xem bình luận của mọi người về một đề tài nào đó trên mạng xã hội?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 5,
            question: "Bạn follow ít nhất 5 trang/nhân vật hot trên mạng?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 6,
            question: "Bạn thường cập nhật tin tức từ các post trên facebook hơn là truy cập vào một trang web cụ thể?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 7,
            question: "Ngày nào bạn cũng vô youtube xem video?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 8,
            question: "Bạn cảm thấy bứt rứt nếu không thể truy cập vô các trang mạng xã hội?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 9,
            question: "Bạn thích check-in bất cứ nơi nào bạn đến?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 10,
            question: "Trong các buổi gặp gỡ bạn bè, bạn cũng vẫn luôn “dính” với chiếc điện thoại và truy cập các trang mạng xã hội?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }, {
            id: 10,
            question: "Trong các buổi gặp gỡ bạn bè, bạn cũng vẫn luôn “dính” với chiếc điện thoại và truy cập các trang mạng xã hội?",
            answers: [{
                title: "a. Đúng.",
                score: 1
            }, {
                title: "b. Sai.",
                score: 0
            }]
        }];

        var results = [{
            title: "Từ 6 câu đúng trở lên",
            detail: "Bạn sống quá ảo - Bạn nên điều chỉnh lại phần ảo của mình để phần thật có dịp thể hiện. Sống ảo lâu ngày coi chừng bạn tưởng mình cũng là một sản phẩm ảo diệu nào đó chứ không phải là anh A, chị B có tên có họ đâu đấy.",
            minScore: 7,
            maxScore: 10,
            linkShare: "https://fbapp.yan.vn/ban-dang-song-qua-ao_5.html?fromFB=1"
        }, {
            title: "Từ 4-6 câu \"đúng\"",
            detail: "Bạn đang đặt 1 chân vào thế giới ảo – vẫn còn kịp để bạn cân bằng ảo và thật, ảo cũng vui nhưng thật  mới là cuộc sống của chính mình bạn ạ.",
            minScore: 4,
            maxScore: 6,
            linkShare: "https://fbapp.yan.vn/ban-dang-dat-1-chan-vao-the-gioi-ao_6.html?fromFB=1"
        }, {
            title: "Dưới 4 câu \"đúng\"",
            detail: "Bạn hoàn toàn tỉnh táo - Đối  với bạn sống thật là là trên hết, ảo tung chảo cho vui nhà vui cửa tí thôi",
            minScore: 1,
            maxScore: 3,
            linkShare: "https://fbapp.yan.vn/ban-dang-hoan-toan-tinh-tao_7.html?fromFB=1"
        }];
    </script>
    <script type="text/javascript">
        var currentQuestion = 0;
        var yourAnswers = [{ id: 0, checkedIndex: -1, score: 0 }, { id: 1, checkedIndex: -1, score: 0 }
            , { id: 2, checkedIndex: -1, score: 0 }, { id: 3, checkedIndex: -1, score: 0 }
            , { id: 4, checkedIndex: -1, score: 0 }, { id: 5, checkedIndex: -1, score: 0 }
            , { id: 6, checkedIndex: -1, score: 0 }, { id: 7, checkedIndex: -1, score: 0 }
            , { id: 8, checkedIndex: -1, score: 0 }, { id: 9, checkedIndex: -1, score: 0 }];
        var linkToShare = "";
        function checkAnswerToNext() {
            if (yourAnswers[currentQuestion].checkedIndex == -1) {
                $("#lblWarning").show();
                return false;
            }
            else {
                $("#lblWarning").hide();
                return true;
            }
        }
        function showQuestion(index) {
            currentQuestion = index;
            if (index <= 9) {
                $("#appPanel").hide();
                $("#lblNumber").html(index + 1);
                $("#lblQuestion").html(questions[index].question);
                for (var i = 0; i < 2; i++) {
                    $("input[name='answer']:eq(" + i + ")").next().html(questions[index].answers[i].title);
                    $("input[name='answer']:eq(" + i + ")").val(questions[index].answers[i].score);
                    if (yourAnswers[index].checkedIndex == -1) {
                        $("input[name='answer']:eq(" + i + ")").get(0).checked = false;
                    }
                    else {
                        $("input[name='answer']:eq(" + index + ")").get(0).checked = true;
                    }
                }
                $("#appPanel").show();
                $("#appwrapper").css("background", "transparent url('https://fbapp.yan.vn/images/conntentapp" + Math.ceil((index + 1) / 2) + ".jpg') no-repeat left top");
                $("input[name='answer']").click(function () {
                    if ($(this).get(0).checked == true) {
                        yourAnswers[currentQuestion].score = parseInt($(this).attr("value"));
                        yourAnswers[currentQuestion].checkedIndex = parseInt($(this).attr("id").replace("answer", "")) - 1;
                        console.log(yourAnswers[currentQuestion]);
                        getTotalScore();
                    }
                });
            }
            else {
                $("#btnFinish").show();
            }
        }
        function getTotalScore() {
            var totalScore = 0;
            for (var i = 0; i < yourAnswers.length; i++) {
                //console.log(yourAnswers[i].score);
                totalScore += yourAnswers[i].score;
            }
            $("#lblTotalScore").html(totalScore);
            return totalScore;
        }
        function finish() {
            var totalScore = getTotalScore();
            console.log("finish totalScore:" + totalScore);
            for (var i = 0; i < results.length; i++) {
                console.log("results[i]:" + results[i]);
                if (totalScore >= results[i].minScore && totalScore <= results[i].maxScore) {
                    console.log("totalScore:" + totalScore + " - minScore: " + results[i].minScore + "- minScore: " + results[i].maxScore);
                    $("#lblResultTitle").html(results[i].title);
                    $("#lblResultDetail").html(results[i].detail);
                    linkToShare = results[i].linkShare;
                    break;
                }
            }
            $("#appPanel").hide();
            $("#resultPanel").show();
        }
        function restart() {
            $("#appPanel").show();
            $("#resultPanel").hide();
        }
        function shareResult() {
            /*FB.ui({
                method: 'pagetab',
                redirect_uri: 'https://www.facebook.com/dialog/pagetab?app_id=1420259911602083&redirect_uri=yan.vn'
            }, function (tab_response) {
                alert(tab_response);
            });
            return;*/
            FB.ui(
                {
                    method: 'share',
                    body: "Trắc nghiệm: Đo độ \"sống ảo\" của bạn ",
                    href: linkToShare,
                },
                function (response) {
                    if (response && !response.error_code) {
                        //alert('Posting completed.');
                        _gaq.push(['_trackEvent', 'FB App', 'G-Show : song ao', 'Share thanh cong']);
                        window.location = window.location;
                    } else {
                        //alert('Error while posting.');
                    }
                }
            );
        }
        $(document).ready(function () {
            $("#appPanel, #lblWarning").hide();
            $("#resultPanel").hide();
            $("#btnFinish").hide();
            $("#welcomePnl").show();

            //showQuestion(currentQuestion);
        });
    </script>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-26870935-2']); //TotalTraffic
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
</body>
</html>